html{
    font-size: 15px;
    color: gray;
    a{
        text-decoration: none;
    }
    body{
        width: 100vw;
        height: 100vh;
        display: grid;
        justify-content: center;
        align-content: center;
        main{
            width: 500px;
            height: 500px;
            border: solid 1px black;
            border-radius: 50%;
            position: relative;
            // &:hover .miao{
            //     transform: rotate(270deg);
            // }
            &::before{
                content: ' ';
                width: 10px;
                height: 10px;
                background-color: red;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                z-index: 1;
            }
            .kedu{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                justify-content: center;
                align-items: center;


                div{
                    width: 20px;
                    height: 2px;
                    background-color: black;
                    position: absolute;
                    @for $i from 1 to 17 {
                        &:nth-child(#{$i}){
                            transform: rotate(#{$i * 30 - 90}deg) translateX(240px) ;
                        }
                        &:nth-child(#{$i})::after{
                            content: '#{$i}';
                            position: absolute;
                            right: 30px;
                            top: -10px;
                            transform: rotate(#{360-($i * 30 - 90)}deg);

                        }
                    }
                }
            }
            .zhizhen{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                display: flex;
                justify-content: center;
                align-items: center;
                div{
                    
                   transform: translateY(-50%);
                   position: absolute;
                   transition-duration: 1s;
                   transition-timing-function: steps(60,start);
                    &:nth-child(1){
                        width: 2px;
                        height: 200px;
                        background-color: black;
                        transform:rotate(0deg) translateY(-50%)
                        
                    }
                    &:nth-child(2){
                        width: 10px;
                        height: 120px;
                        background-color: black;
                        transform: rotate(45deg) translateY(-50%);
                    }
                    &:nth-child(3){
                        width: 5px;
                        height: 150px;
                        background-color: black;
                        transform: rotate(145deg) translateY(-50%);
                    } 
                }
            }
            &:hover > .zhizhen > div:nth-child(1){
                transition-duration: 60s;
                transform: rotate(360deg) translateY(-50%);
            }
        }
    }
}